<!-- /*
 * @Author: mikey.zhaopeng 
 * @Date: 2023-04-19 13:19:38 
 * @Last Modified by:   mikey.zhaopeng 
 * @Last Modified time: 2023-04-19 13:19:38 
 */ -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            width: 100%;
            height: 100%;
            background: url('/static/login_background.jpg') no-repeat;
            background-size: cover;
        }
        #login_box {
            width: 30%;
            height: 16.5rem;
            background-color: #00000060;
            margin: auto;
            margin-top: 10%;
            margin-bottom: 10%;
            text-align: center;
            border-radius: .3125rem;
            padding: 1.5625rem 1.5625rem;
        }
        h1 {
            color: #ffffff90;
            margin-top: 5%;
        }
        span {
            color: #fff;
        }
        input {
            border: 0;
            width: 80%;
            font-size: 1rem;
            color: #fff;
            background: transparent;
            border-bottom: .0625rem solid #fff;
            padding: .1563rem .3125rem;
            outline: none;
            margin-top: 1.625rem;
        }
        button {
            margin-top: 1rem;
            width: 80%;
            height: 2.2625rem;
            border-radius: .3125rem;
            border: 0;
            color: #fff;
            text-align: center;
            line-height: .9375rem;
            font-size: .4688rem;
            background-image: linear-gradient(to right, #30cfd0, #330867);
        }
        #sign_up {
            margin-top: 45%;
            margin-left: 60%;
        }
        a {
            color: #b94648;
        }
    </style>
</head>

<body>
    <div id="login_box">
        <h1>LOGIN</h1>
        <!-- <form > -->
            <input type="text" name = "username" placeholder="请输入用户名" id="username">
            <input type="password" name="password" placeholder="请输入密码" id="password">
            <button onclick="Login()">登录</button><br>
            <button onclick="change()">注册</button><br>
        <!-- </form> -->
    </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
<script>
    var httpUrl = "/login/"
    function change(){
        location.href = "/register/"
    }
    
    function Login(){
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        // console.log(md5(password))
        // console.log(1)
        password = md5(password)
        username = md5(username)
        $.ajax({
            url:httpUrl,
            type:'post',
            dataType:'json',
            data:{
                username:username,
                password:password
            },
            success:function(data){
                console.log(data);
                if(data.code!=200){
                    alert("用户名或密码错误");
                }
                else {
                    location.href="/home"
                }
            },
            error:function(error){
                console.log(error);
            }
        })
    }
</script>
</html>